<template>
  <a-form
    :label-col-props="{ span: 4 }"
    :model="formValue"
    @submit="handleSubmit"
    :rules="rules"
    ref="formRef"
    style="max-width: 550px"
    layout="vertical"
    class="px-4 pt-4"
  >
    <a-form-item label="昵称" field="name" :rules="rules.name">
      <a-input v-model="formValue.name" placeholder="请输入昵称" />
    </a-form-item>

    <a-form-item label="邮箱" field="email" :rules="rules.email">
      <a-input placeholder="请输入备案编号" v-model="formValue.email" />
    </a-form-item>

    <a-form-item label="联系电话" field="mobile" :rules="rules.mobile">
      <a-input placeholder="请输入联系电话" v-model="formValue.mobile" />
    </a-form-item>

    <a-form-item label="个人简介" field="brief">
      <a-textarea
        v-model="formValue.brief"
        :auto-size="{ minRows: 5, maxRows: 8 }"
        placeholder="请输入个人简介"
      />
    </a-form-item>

    <a-form-item label="联系地址" field="address">
      <a-input v-model="formValue.address" type="textarea" placeholder="请输入联系地址" />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit">更新基本信息</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';

  const rules = {
    name: [
      {
        required: true,
        message: '请输入昵称',
        trigger: 'blur',
      },
    ],
    email: [
      {
        required: true,
        message: '请输入邮箱',
        trigger: 'blur',
      },
    ],
    mobile: [
      {
        required: true,
        message: '请输入联系电话',
        trigger: 'input',
      },
    ],
  };
  const formRef: any = ref(null);

  const formValue = reactive({
    name: '',
    mobile: '',
    email: '',
    address: '',
    brief: '',
  });

  function handleSubmit({ values, errors }) {
    if (errors) {
      console.log('error', errors);
      return Message.error('验证失败，请填写完整信息');
    }
    console.log('values', values);
    Message.success('验证成功');
  }
</script>
